import React, { Component } from 'react'
import {
  View,
  StyleSheet
} from 'react-native'

import { connect } from 'react-redux'
import Button from '../../components/common/button'

import {
  logout,
  push
} from '../../actions/nav'
import {
  BULK
} from '../../constants/pages'

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    backgroundColor: 'transparent',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0
  }
})

class Center extends Component {
  constructor (props) {
    super(props)
    this.displayName = 'Center'

    this.pushToHome = this.pushToHome.bind(this)
    this.loginOut = this.loginOut.bind(this)
  }

  componentWillMount () {
    console.log('===Center====')
  }

  pushToHome () {
    console.log('====Center 44===')
    const { dispatch } = this.props
    dispatch(push(BULK))
  }

  loginOut () {
    console.log('===Center==55==')
    this.props.dispatch(logout())
  }

  render () {
    return (
      <View style={styles.container}>
        <Button
          onPress={this.pushToHome}
          style={{ margin: 20 }}
          buttonTitle={'MessageList'}
        />
        <Button
          onPress={this.loginOut}
          style={{ margin: 20 }}
          buttonTitle={'Logout'}
        />
      </View>
    )
  }
}

Center.propTypes = {
}

Center.navigationOptions = {
  headerTitle: 'Center',
  headerLeft: null
}

function mapStateToProps (state) {
  return {
  }
}

function mapDispatchToProps (dispatch) {
  return {
    dispatch
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Center)
